<template>
  <div>
    <a-row style="padding: 10px 5px 10px">
      <!--主要内容-->
      <a-col :lg="{ span: '17' }" :md="{ span: 24 }" class="article-detail">
        <h1 class="article-title">{{ postCont.title }}</h1>
        <div class="article" style="padding: 1.8rem 0 0;">
          <div class="author-info-block">
            <!--作者头像-->
            <div class="avatar">
              <img :src="'/api'+postCont.authorAvatar"/>
            </div>
            <!--作者信息-->
            <div class="author-info-box">
              <div class="author-name">{{ postCont.authorName }}</div>
              <div class="meta-box">
                <time>{{ postCont.time }}</time>
              </div>
            </div>
          </div>
        </div>

        <div class="md-content" v-html=" postCont.content"></div>
        <a-divider/>
        <!--点赞收藏关注-->
        <a-row type="flex" justify="center" align="center" style="height: 20px">
          <a-col :span="10">
            <a-row type="flex" justify="space-around" align="center" style="height: 20px">
              <a-col :span="5" @click="likePost">
                <div v-if="postCont.like===false" style="display: flex;align-items: center">
                  <div>
                    <a-tooltip>
                      <template #title>点赞</template>
                      <like-two-tone two-tone-color=rgb(85,85,85) :style="{fontSize: '16px'}"/>
                    </a-tooltip>
                  </div>
                  <div style="margin-left: 5px">{{ postCont.likeCount }}</div>
                </div>
                <div v-else style="display: flex;align-items: center">
                  <div>
                    <a-tooltip>
                      <template #title>已点赞</template>
                      <like-two-tone two-tone-color=rgb(0,102,255) :style="{fontSize: '16px'}"/>
                    </a-tooltip>
                  </div>
                  <div style="margin-left: 5px">{{ postCont.likeCount }}</div>
                </div>
              </a-col>

              <a-col :span="5" @click="collectPost">
                <div v-if="postCont.collect===false" style="display: flex;align-items: center">
                  <div>
                    <a-tooltip>
                      <template #title>收藏</template>
                      <heart-two-tone two-tone-color=rgb(85,85,85) :style="{fontSize: '16px'}"/>
                    </a-tooltip>
                  </div>
                  <div style="margin-left: 5px">{{ postCont.collectCount }}</div>
                </div>
                <div v-else style="display: flex;align-items: center">
                  <div>
                    <a-tooltip>
                      <template #title>已收藏</template>
                      <heart-two-tone two-tone-color=rgb(0,102,255) :style="{fontSize: '16px'}"/>
                    </a-tooltip>
                  </div>
                  <div style="margin-left: 5px">{{ postCont.collectCount }}</div>
                </div>
              </a-col>

              <a-col :span="5" @click="followPost">
                <div v-if="postCont.followPost===false" style="display: flex;align-items: center">
                  <div>
                    <a-tooltip>
                      <template #title>关注</template>
                      <tag-two-tone two-tone-color=rgb(85,85,85) :style="{fontSize: '16px'}"/>
                    </a-tooltip>
                  </div>
                  <div style="margin-left: 5px">{{ postCont.followPostCount }}</div>
                </div>
                <div v-else style="display: flex;align-items: center">
                  <div>
                    <a-tooltip>
                      <template #title>已关注</template>
                      <tag-two-tone two-tone-color=rgb(0,102,255) :style="{fontSize: '16px'}"/>
                    </a-tooltip>
                  </div>
                  <div style="margin-left: 5px">{{ postCont.followPostCount }}</div>
                </div>
              </a-col>

              <a-col :span="9">
                <div style="display: flex;align-items: center">
                  <div>
                    <message-two-tone two-tone-color=rgb(85,85,85) :style="{fontSize: '16px'}"/>
                  </div>
                  <div style="margin-left: 5px">{{ postCont.commentCount }}</div>
                  <div>条评论</div>
                </div>
              </a-col>

            </a-row>
          </a-col>
          <a-col :span="14">
            <a-button size="small" v-for="(i,index) in postCont.labels" :key="index" disabled style="margin-left: 10px">
              {{ i.name }}
            </a-button>
          </a-col>

        </a-row>

        <div>
          <unlock-cont :post-i-d="postCont.postId"></unlock-cont>
          <give-reward :post-i-d="postCont.postId"></give-reward>
          <a-button @click = "$refs.reportpost.showModal(postCont.postId)">举报</a-button>
        </div>

        <report-post ref="reportpost" />
        <a-divider/>
        <!--评论区-->
        <div>
          <div>
  
     
  
            <!--评论区-->
            <a-list class="comment-list" :header="`${Comments.length} 评论`" item-layout="horizontal" :data-source="Comments">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-comment :author="item.name" :avatar="item.avatar">
                    <template #actions>
                      <!-- <span @click="ReplyVisible(item)">回复</span> -->
                    </template>
                    <template #author>
                      <a>{{ item.name }}</a>
                    </template>
                    <template #avatar>
                      <a-avatar :src="item.avatar" alt=" item.name " />
                    </template>
                    <template #content>
                      <p>
                        {{ item.cont }}
                      </p>
                    </template>
                    <template #datetime>
                      <!-- <a-tooltip :title="moment(item.time).format('YYYY-MM-DD HH:mm:ss')">
                        <span>{{ moment(item.time).fromNow() }}</span>
                      </a-tooltip> -->
                    </template>
                    <a-comment v-for="chil in item.chil" :key="chil.id">
                      <template #actions>
                        <span @click="ReplyVisible(item, chil.name)">回复</span>
                      </template>
                      <template #author>
                        <a>{{ chil.name }}</a>
                      </template>
                      <template #avatar>
                        <a-avatar :src="chil.avatar" alt="chil.name" />
                      </template>
                      <template #content>
                        <p>
                          {{ chil.cont }}
                        </p>
                      </template>
                      <!-- <template #datetime>
                        <a-tooltip :title="
                            moment(chil.time).format('YYYY-MM-DD HH:mm:ss')
                          ">
                          <span>{{ moment(chil.time).fromNow() }}</span>
                        </a-tooltip>
                      </template> -->
                    </a-comment>
                    <a-comment >
                      <!-- <template #avatar>
                        <a-avatar :src="user.avatar" :alt="user.userName" />
                      </template> -->
                      <!-- <template #content>
                        <a-form-item :wrapper-col="{ span: 24 }">
                          <a-textarea :rows="4" v-model:value="addReply.cont" />
                        </a-form-item>
                        <a-form-item>
                          <a-button html-type="submit" :loading="submitting1" type="primary" @click="addComment()">
                            提交
                          </a-button>
                        </a-form-item>
                      </template> -->


                    </a-comment>
                  </a-comment>
                </a-list-item>
                
              </template>
            <a-textarea
              v-model:value="addReply.cont"
              placeholder="神评等你来！"
              :auto-size="{ minRows: 2, maxRows: 5 }"
            />
            </a-list>
            <a-button  @click="addComment">
              提交
            </a-button>
       
      
      </div>

        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {ref, reactive} from "vue";
import {get, put, post, tip, del} from "@/common";
import {message} from 'ant-design-vue';
import {useRouter, useRoute} from "vue-router";
import {LikeTwoTone, MessageTwoTone, HeartTwoTone, TagTwoTone, PlusCircleTwoTone} from '@ant-design/icons-vue';
import GiveReward from "@/components/score/GiveReward.vue";
import UnlockCont from "@/components/score/UnlockCont.vue";
import ReportPost from "@/components/report/ReportPost.vue";


export default {
  components: {UnlockCont, GiveReward, HeartTwoTone, LikeTwoTone, MessageTwoTone, TagTwoTone, PlusCircleTwoTone, ReportPost},
  beforeRouteUpdate(to, from, next) {
    this.postCont = ref(JSON.parse(decodeURIComponent(to.query.item)));
    next();
  },
  setup() {
    const postCont = reactive(JSON.parse(decodeURIComponent(useRoute().query.item)));
    
    const interactEntity = reactive({
      postId: postCont.postId,
    });


    const addReply=ref({
      postId:postCont.postId,
      cont:"",
      state:0,
    });
    const addComment=()=>{
      console.log(addReply.value);
      post("/post/createcomment",addReply.value).then((res)=>{
      });
      addReply.value.cont="";
      getComment();
    }
    

    const likePost = () => {
      post("/interact/likePost",interactEntity).then((res)=>{
      if (postCont.like===true){
        postCont.like=false;
        postCont.likeCount = postCont.likeCount - 1;
      }else {
        postCont.like = true;
        postCont.likeCount = postCont.likeCount + 1;
      }
      })
    }

    const collectPost = () => {
      post("/interact/collectPost",interactEntity).then((res)=>{
        if (postCont.collect===true){
          postCont.collect=false;
          postCont.collectCount = postCont.collectCount - 1;
        }else {
          postCont.collect = true;
          postCont.collectCount = postCont.collectCount + 1;
        }
      })
    }

    const followPost = () => {
      post("/interact/followPost",interactEntity).then((res)=>{
        if (postCont.followPost===true){
          postCont.followPost=false;
          postCont.followPostCount = postCont.followPostCount - 1;
        }else {
          postCont.followPost = true;
          postCont.followPostCount = postCont.followPostCount + 1;
        }
      })
    }

    //获取评论
    const postQuery = reactive({
        postId: useRoute().query.postId,
      });
  
      
  
      const getPostCont=(postQuery)=>{
        get().then((res)=>{
          postCont.value=res.data;
        })
      };
    const Comments = ref([]);
    const article=({
        
        id:postCont.postId,
      }); 
    const getComment = () => {
      post("/post/getarticlecomment",article).then((res) => {
        Comments.value = res.data;
        console.log(Comments.value);
          });
        };
    getComment();

    return {
      postCont,
      likePost,
      collectPost,
      followPost,
      postQuery,
      getPostCont,
      Comments,
      getComment,
      article,
      addReply,
      addComment,
    };
  }
}
</script>

<style lang="scss" scoped>
body {
  background-color: rgb(238, 238, 238);
}

.icons-list :deep(.anticon) {
  margin-left: 0px;
  font-size: 4px;
}

.article-detail {
  margin: 0 auto;
  margin-bottom: 1.5rem;
  padding: 0 1.8rem;
  background-color: #fff;
  border-radius: 2px;
  box-sizing: border-box;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  .comment-title {
    font-size: 19px;
    font-weight: 700;
    color: #494949;
    padding-bottom: 20px;
  }

  .article {
    margin-bottom: 3rem;

    .author-info-block {
      display: flex;
      margin-bottom: 2rem;
      padding-bottom: 2px;
      box-shadow: 0px 11px 6px -15px #000;

      .avatar {
        cursor: pointer;
        padding-top: 4px;

        img {
          display: flex;
          align-items: center;
          flex: 0 0 auto;
          margin-right: 1rem;
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
        }
      }

      .author-info-box {
        min-width: 0;
        flex-grow: 1;

        .author-name {
          cursor: pointer;
          display: inline-block;
          max-width: 100%;
          font-size: 1.1rem;
          font-weight: 700;
          color: #333;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .meta-box {
          font-size: 0.9rem;
          color: #909090;
        }
      }

      .comment-info-box {
        min-width: 0;
        flex-grow: 1;

        .comment-name {
          cursor: pointer;
          display: inline-block;
          max-width: 100%;
          font-size: 1rem;
          font-weight: 600;
          color: rgb(90, 90, 90);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .comment-meta-box {
          font-size: 0.9rem;
          color: #909090;
        }

        comment-txt {
          font-size: 0.9rem;
          color: #494949;
        }
      }
    }
  }

  .article-title {
    margin: 0.67em 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
  }
}

/*评论区域*/
</style>
